// 如何在 webpack 构建的项目中， 使用vue 进行开发

// 复习  在普通网页中如何使用vue：
// 1、使用script 标签，引入 vue 的包
// 2、在 index 页面中。创建一个id 为app 的div 容器
// 3、 通过 new Vue 得到一个Vue 实例

// 在webpack 中尝试使用 Vue
import Vue from 'vue'
// import Vue from '../node_modules/vue/dist/vue.js'
// 回顾：包的查找规则：
// 1、找 项目根目录中 有没有 node_modeules 的文件夹
// 2、在 node_modules 中 根据包名，找对应的 vue 文件夹
// 3、在 vue 文件夹中， 找一个叫做 package.json 的包配置文件
// 4、在package.json 文件中， 查找一个 main 属性 【 main 属性指定了 这个包在被加载时候，的入口文件】
// var login = {
//     template: '<h1>这是login组件</h1>'
// }
// 1、导入 login 组件
import login from './login.vue'
// 2、默认 webpack 无法打包  .vue 文件，需要安装 相关的 loader
// npm i vue-loader vue-template-compiler -D
// 在配置文件中，新增 loader 配置项 {test: /\.vue$/, use: 'vue-loader'}
var vm = new Vue({
    el: '#app',
    data: {
      msg: 123,
    },
    methods: {
    
    },
    // components: {
    //     login
    // },
    render: c =>  c(login)  // 在webpack 中， 如果想要 通过vue ，把一个组件放到页面中展示，vm 实例中的render 函数可以实现
})

import m1, { title as t, content } from './test.js'
console.log(m1);
console.log(t);
console.log(content);
